//fonts
@font-face{
	font-family:'FZ';
	src: url('./font/fz.TTF');
}
//fonts end

//header
body, html {
	min-width: 1330px;	
}

@minWidth: 1330px;
@navALineH: 40px;

.header {
	//overflow: hidden;
	background: url(../images/bannerbk.png) center no-repeat;
	background-size: 1920px 740px;
	min-width: @minWidth;
	height: 740px;
	//header-top
	.header-top-logo {
		margin: (105px-67px)/2 0;
		width: 278px;
		height: 67px;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.header-top-nav {
		position: relative;
		z-index: 999;
		.h-t-nav-option {
			float: left;
			margin: 0 12px;
			height: 105px;
			line-height: 105px;
			font-size: 16px;
			color: #fff;
			a {
				display: inline-block;
				margin: (105px - @navALineH)/2 15px;
				border-bottom: 1px solid transparent;
				line-height: @navALineH;
				font-size: 16px;
				color: #fff;
				text-decoration: none;
				&:hover, &.active {
					border-bottom: 1px solid #fff;
				}
			}
		}
		.user-info {
			position: relative;
			cursor: pointer;
			background: data-uri("../images/dropdown.png") right center no-repeat;
			.user-header-img {
				float: left;
				display: inline-block;
				margin: (105px - 42px)/2 10px;
				width: 42px;
				height: 42px;
				background: url('../images/user/userheader.png') center no-repeat;
			}
			.user-name {
				margin: 0;
				float: left;
				line-height: 105px;
				font-size: 16px;
				color: #fff;
				max-width: 120px;
				display: block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.user-manage {
				position: absolute;
				top: 90px;
				left: 40px;
				width: 110px;
				border: 1px solid #a9d9ff;
				border-radius: 3px;
				display: none;
				background-color: #1898FB;
				.span1 {
					position: absolute;
					display: inline-block;
					top: -11px;
					left: (110px-28px)/2;;
					width: 0;
					height: 0;
					border-left: 10px solid transparent;
					border-right: 10px solid transparent;
					border-bottom: 12px solid #1898FB;
					z-index: 2;
				}
				.span2 {
					position: absolute;
					display: inline-block;
					top: -12px;
					left: (110px-28px)/2 - 1px;
					width: 0;
					height: 0;
					border-left: 11px solid transparent;
					border-right: 11px solid transparent;
					border-bottom: 12px solid #fff;
					z-index: 1;
				}
				a {
					border: 0;
					margin: 0;
					padding: 0;
					display: inline-block;
					width: 100%;
					height: 56px;
					font-size: 14px;
					line-height: 56px;
					text-align: center;
					float: left;
					&:hover {
						background-color: #6FB6F4;
					}
				}
			}
			&:hover {
				.user-manage {
					display: block;
				}
			}
		}
	}
	
	//header-bottom
	.header-figure {
		margin: (740px-505px-105px)/2 0;
		max-width: 650px;
		max-height: 505px;
	}
	.header-login {
		margin: (740px-300px-105px)/2 0;
		width: 580px;
		.info {
			float: left;
			margin-top: 30px;
			width: 100%;
			height: 155px;
		}
		.btn-box {
			overflow: hidden;
			float: left;
			margin: 80px 36px 0;
			.btn {
				float: left;
				display: inline-block;
				padding-right: 30px;
				margin: 10px 19px;
				width: 182px;
				height: 50px;
				border: 2px solid #fff;
				border-radius: 5px;
				font-size: 18px;
				line-height: 50px;
				text-align: center;
				text-decoration: none;
				cursor: pointer;
				&.btn-login {
					color: #1D99F8;
					background: url(../images/headerloginicon.png) center no-repeat #fff;
				}
				&.btn-register {
					color: #fff;
					background: url(../images/headerregistericon.png) center no-repeat #1D99F8;
				}
				&:hover {
				box-shadow:0 0 5px 5px #3089E9, 0 0 5px 10px #1A96F7;  
				}
			}
		}
	}

	//user.html
	.header-user {
		margin: 116px auto;
		width: 1163px;
		height: 406px;
		background: url(../images/user/userp.png) center no-repeat;
	}

	//about.html
	.about-box {
		position: relative;
		.about-info {
			position: absolute;
			top: 35px;
			left: 365px;
			width: 600px;
			h3 {
				margin: 35px 0;
				font-size: 36px;
				color: #fff;
				text-align: center;
			}
			p {
				text-indent: 2.4em;
				font-size: 16px;
				color: #fff;
				text-align: left;
				line-height: 24px;
			}
		}
	}
}
//header end

//footer
.footer {
	//footer-top
	.footer-top {
		background-color: #3D9DF3;
	}
	.f-t-left {
		overflow: hidden;
		margin: 55px 0;
		.ewm {		
			width: 156px;
			height: 156px;
		}
		.contact {
			overflow: hidden;
			margin-left: 26px;
			.title {
				font-size: 18px;
				color: #fff;
				font-weight: bold;
			}
			p {
				margin: 15px 0;
				font-size: 16px;
				color: #fff;
				font-weight: bold;
				line-height: 30px;
				&:last-child, &.last-child {
					margin-top: 10px;
					margin-bottom: 0;
				}
			}
		}
	}
	.footer-nav {
		overflow: hidden;
		margin: 55px 0;
		.option {
			margin: 12px 0;
			a {
				font-size: 16px;
				color: #fff;
				font-weight: bold;
				line-height: 30px;
				text-decoration: none;
			}
			&:first-child, &.first-child {
				margin-top: 0;
			}
			&:last-child, &.last-child {
				margin-bottom: 0;
			}
		}
		&.mgr100 {
			margin-right: 100px;
		}
	}
	.footer-bottom {
		overflow: hidden;
		background-color: #3B4A83;
		text-align: center;
		line-height: 65px;
		font-size: 16px;
		color: #fff;
		font-weight: bold;
	}
}
//footer end

//page 

.page {
	text-align: center;
	overflow: hidden;
	padding-left: 0;
    margin: 35px 0;
	list-style: none;
	li {
		display: inline-block;
		width: 38px;
		height: 38px;
		border: 1px solid #E7E7E7;
		background-color: #F8F8F8;
		border-radius: 19px;
		font-size: 18px;
		line-height: 36px;
		cursor: pointer;
		span {
			display: inline-block;
			width: 36px;
			height: 36px;
			border: 1px solid transparent;
			background-color: #F8F8F8;
			border-radius: 18px;
		}
		&:hover, &.active {
			border-color: #13C1D7;
			background-color: #90D3DD;
			span {
				border-color: #fff;
				background-color: #90D3DD;
				color: #fff;
			}
		}
	}
	.prev {
		color: transparent;
		span {
			background: url('../images/lefticon.png') center no-repeat;
			color: transparent;
		}
		&:hover {
			color: transparent;
			span {
				background-image: url('../images/lefticond.png');
				color: transparent;
			}
		}
		&.disable {
			color: transparent;
			span {
				background-image: url('../images/lefticonf.png');
				color: transparent;
			}
		}
	}
	.next {
		color: transparent;
		span {
			color: transparent;
			background: url('../images/righticon.png') center no-repeat;
		}
		&:hover {
			color: transparent;
			span {
				background-image: url('../images/righticond.png');
				color: transparent;
			}
		}
		&.disable {
			color: transparent;
			span {
				background-image: url('../images/righticonf.png');
				color: transparent;
			}
		}
	}
	.more-page {
		span {
			position: relative;
			top: -4px;
			line-height: 27px;
		}
	}
}


//index.html
//container
// .container {
// 	min-width: 1330px;
// }
//.container-one
.container-home-one {
	overflow: hidden;
	background: url(../images/homebkbottom.png) bottom left no-repeat;
	background-size: 1920px 33px;
}

.hOptionWho(@num: 1) {
	@name : e(%(".option%d", @num));
	@url : %("../images/homeicon%d.png", @num);
	@urlbk : %("../images/homebk%d.png", @num);
	@{name} {
		background-image: url(@url);
		.btn-box {
			background-image: url(@urlbk);
		}
	}
}
.home-left {
	overflow: hidden;
	margin: 100px 0 130px;
	width: 770px;
	.title {
		text-align: center;
		margin-bottom: 30px;
		h3 {
			line-height: 36px;
			font-size: 24px;
			color: #343434;
		}
		p {
			line-height: 24px;
			font-size: 16px;
			color: #A6A6A6;
		}
		em {
			line-height: 48px;
			font-size: 18px;
			color: #3C9BF2;
		}
	}
	.option {
		overflow: hidden;
		float: left;
		margin: 30px 0;
		width: 100%;
		height: 100px;
		background: no-repeat 0 10px;
		.info {
			overflow: hidden;
			float: left;
			margin-left: 110px;
			margin-top: 10px;
			width: 390px;
			h3 {
				font-size: 20px;
				line-height: 24px;
				margin-bottom: 10px;
				color: #343434;
			}
			p {
				font-size: 16px;
				line-height: 20px;
				color: #9A9A9A;
			}
		}
		.btn-box {
			overflow: hidden;
			float: right;
			width: 213px;
			height: 100px;
			background: top left no-repeat;
			.btn {
				position: relative;
			    display: inline-block;
			    width: 164px;
			    height: 21px;
			    text-align: center;
			    font-size: 14px;
			    font-weight: 700;
			    line-height: 21px;
			    top: 59px;
			    left: 24px;
			    text-decoration: none;
			    background-color: #EFEFEF;
				&:hover {
					background-color: lighten(#EFEFEF, 10%)
				}
				&.onecolor {
					color: #CB9000;
				}
				&.twocolor {
					color: #9D64C4;
				}
				&.therecolor {
					color: #2385FE;
				}
			}
		}
	}
	.loop(@counter) when (@counter > 0) {
		.loop((@counter - 1));    // 递归调用自身
		.hOptionWho(@counter);
	}
	.loop(3)
}
.home-right {
	position: relative;
	margin-top: 66px;
	z-index: -1;
}

.imgWho(@num: 1) {
	@name : e(%(".img%d", @num));
	@url : %("../images/home2icon%d.png", @num);
	@{name} {
		background-image: url(@url);
	}
}
//container-two
.container-home-two {
	overflow: hidden;
	background: url(../images/homebk2.jpg) center no-repeat;
	background-size: 1920px 815px;
	min-width: 1330px;
	.title {
		font-size: 16px;
		line-height: 40px;
		margin: 10px 0;
		text-align: center;
		font-weight: bold;
		color: #fff;
		h3 {
			font-size: 24px;
			line-height: 36px;
			margin-top: 40px;
			text-align: center;
		}
	}
	.c-t-options {
		overflow: hidden;
		margin: 30px 110px;
	}
	.option {
		float: left;
		overflow: hidden;
		margin: 6px 32px;
		width: 305px;
		height: 265px;
		border-radius: 5px;
		background-color: rgba(29, 134, 239, 0.35);
		cursor: pointer;
		.top {
			margin: 0 38px;
			padding: 0 0 30px ;
			width: 305px - 38px*2;
			height: 166px - 30px;
			border-bottom: 1px solid #68A2D0;
			text-align: center;
			img {
				float: left;
				width: 97px;
				height: 97px;
				display: block;
				margin: 20px (305px - 38px*2-97px)/2 0;
			}
			.img {
				float: left;
				width: 97px;
				height: 97px;
				display: block;
				margin: 20px (305px - 38px*2-97px)/2 0;
				background: center no-repeat;
			}
			.loop(@counter) when (@counter > 0) {
				.loop((@counter - 1));    // 递归调用自身
				.imgWho(@counter);
			}
			.loop(6);
			p {
				float: left;
				width: 100%;
				margin-top: 10px;
				font-size: 14px;
				line-height: 30px;
				font-weight: bold;
				color: #fff;
			}
		}
		.bottom {
			overflow: hidden;
			margin: 0 38px;
			padding: 15px 0;
			border-top: 1px solid #90D1FF;
			p {
				float: left;
				width: 100%;
				margin-top: 10px;
				font-size: 12px;
				line-height: 16px;
				font-weight: bold;
				color: #fff;
			}
		}
		&:hover {
			background-color: rgb(29, 134, 239);
			.top {
				border-bottom: 1px solid #0970D7;
			}
			.bottom {
				border-top: 1px solid #5DAEFF;
			}
		}
	}
	.btn {
		float: left;
		display: inline-block;
		margin-left: (1330px - 170px)/2;
		margin-bottom: 40px;
		width: 166px;
		height: 42px;
		border: 2px solid #fff;
		border-radius: 5px;
		font-size: 20px;
		line-height: 42px;
		color: #fff;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		a {
			font-size: 20px;
			line-height: 42px;
			color: #fff;
			text-decoration: none;
		}
		&:hover {
			background-color: #1D86EF;
			border: 2px solid #1D86EF;
		}
	}
}

.optionWho(@num: 1) {
	@name : e(%(".option%d", @num));
	@{name} {
		background-position: 0 (1 - @num) * 148px;
		&:hover {
			background-position: -143px (1 - @num) * 148px;
		}
	}
}
//container-three
.container-home-three {
	overflow: hidden;
	.title {
		font-size: 16px;
		line-height: 40px;
		margin: 10px 0;
		text-align: center;
		font-weight: bold;
		color: #A6A6A6;
		h3 {
			font-size: 30px;
			line-height: 36px;
			margin-top: 40px;
			text-align: center;
			color: #343434;
		}
	}
	
	.rowl, .rowt, .c-tr-our-partners {
		overflow: hidden;
		width: 825px;
	}
	.c-tr-our-partners {
		margin: 60px auto 130px;
		.mgt {
			margin-top: -30px;
		}
	}
	.c-tr-our-partners {
		overflow: hidden;
		.option {
			float: left;
			margin: 0 4px;
			width: 129px;
			height: 148px;
			cursor: pointer;
			background: url('../images/partners/home3icons.png') no-repeat;
			a {
				display: inline-block;
				width: 100%;
				height: 100%;
			}
		}
		.loop(@counter) when (@counter > 0) {
			.loop((@counter - 1));    // 递归调用自身
			.optionWho(@counter);
		}
		.loop(16);
	}
	.rowl .mgl {
		margin-left: 72px;
	}
}

//container end


//user.html
//container
.container-user-nav {
	height: 90px;
	margin-top: -65px;
	background-color: #3180E1;
	.c-u-nav-options {
		margin: auto;
		width: 275px*4;
		height: 90px;
		// a {
		// 	display: inline-block;
		// 	width: 100%;
		// 	height: 100%;
		// 	font-size: 24px;
		// 	line-height: 90px;
		// 	text-align: left;
		// 	color: #78C4FF;
		// 	text-decoration: none;
		// }
	}
	.c-u-nav-option {
		float: left;
		position: relative;
		padding-left: 120px;
		width: 154px;
		height: 90px;
		background: no-repeat 50px center;
		font-size: 24px;
		line-height: 90px;
		text-align: left;
		color: #78C4FF;
		cursor: pointer;
		span {
			position: absolute;
			display: inline-block;
			bottom: -15px;
			left: (275px-28px)/2;
			width: 0;
			height: 0;
			border-left: 14px solid transparent;
			border-right: 14px solid transparent;
			border-top: 15px solid transparent;
		}

		&.option1 {
			background-image: url('../images/user/usericonf1.png');
		}
		&.option2 {
			background-image: url('../images/user/usericonf2.png');
		}
		&.option3 {
			background-image: url('../images/user/usericonf3.png');
		}
		&.option4 {
			background-image: url('../images/user/usericonf4.png');
		}

		&:hover {
			background-color: #3489f1;
			color: #fff;
			span {
				border-top: 15px solid transparent;
			}
			&.option1 {
				background-image: url('../images/user/usericon1.png');
			}
			&.option2 {
				background-image: url('../images/user/usericon2.png');
			}
			&.option3 {
				background-image: url('../images/user/usericon3.png');
			}
			&.option4 {
				background-image: url('../images/user/usericon4.png');
			}
		}
		&.active {
			background-color: #4FBCFB;
			color: #fff;
			span {
				border-top: 15px solid #4FBCFB;
			}
			&.option1 {
				background-image: url('../images/user/usericon1.png');
			}
			&.option2 {
				background-image: url('../images/user/usericon2.png');
			}
			&.option3 {
				background-image: url('../images/user/usericon3.png');
			}
			&.option4 {
				background-image: url('../images/user/usericon4.png');
			}
			&:hover {
				background-color: #4FBCFB;
				color: #fff;
				span {
					border-top: 15px solid #4FBCFB;
				}
				&.option1 {
					background-image: url('../images/user/usericon1.png');
				}
				&.option2 {
					background-image: url('../images/user/usericon2.png');
				}
				&.option3 {
					background-image: url('../images/user/usericon3.png');
				}
				&.option4 {
					background-image: url('../images/user/usericon4.png');
				}
			}
		}
	}
}
.user-infos-box {
	margin: auto;
	width: 275px*4;
	.user-info-one {
		position: relative;
		margin-top: 25px;
		width: 275px*4 - 4px;
		height: 220px;
		border: 2px solid #FCDD9E;
		border-radius: 3px;
		background: url('../images/user/userinfobk1.jpg') left center no-repeat;
		.icon {
			position: absolute;
			top: -7px;
			left: -7px;
			width: 140px;
			height: 140px;
			background: url('../images/user/userinfoicon.png') center no-repeat;
		}
		.user-info {
			width: 800px;
			height: 100%;
			.header-img {
				margin: 46px 40px 46px 130px;
				width: 127px;
				height: 127px;
				background: url('../images/user/userinfoheader.png') center no-repeat;
			}
			.info {
				overflow: hidden;
				width: 500px;
				margin: 46px 0;
				font-size: 14px;
				font-family: 'FZ';
				line-height: 20px;
				color: #304269;
				span {
					position: relative;
					padding-left: 30px;
					width: 470px;
					display: inline-block;
					background: left 5px no-repeat;
					text-align: left;
					line-height: 30px;
					&.one {
						background-image: url('../images/user/userinfoicon2.png');
					}
					&.two {
						background-image: url('../images/user/userinfoicon3.png');
					}
					&.three {
						background-image: url('../images/user/userinfoicon4.png');
					}
					&.four {
						background-image: url('../images/user/userinfoicon5.png');
					}
					a {
						position: absolute;
						right: 100px;
						top: 0;
						line-height: 30px;
						color: #2696EC;
						font-size: 16px;
					}
					p {
						width: 390px;
						float: right;
						text-align: left;
					}
				}
			}
		}
		.user-balance {
			overflow: hidden;
			position: relative;
			width: 280px;
			height: 100%;
			.one, .two, .three {
				position: absolute;
				border-top-left-radius: 50%;
				border-bottom-left-radius: 50%;
			}
			.one {
				top: -80px;
				left: 0;
				width: 400px;
				height: 400px;
				background-color: #FDF6EE;
				z-index: 1;
			}
			.two {
				top: -70px;
				left: 18px;
				width: 380px;
				height: 380px;
				background-color: #F7DFC1;
				z-index: 2;
			}
			.three {
				position: absolute;
				top: -60px;
				left: 36px;
				width: 360px;
				height: 360px;
				background-color: #E9D38D;
				z-index: 3;
			}
			.content {
				position: relative;
				z-index: 4;
				margin: 40px 0 40px 60px;
				text-align: center;
				p {
					font-size: 16px;
					font-family: 'FZ';
					line-height: 40px;
					color: #A87F01;
				}
				em {
					display: inline-block;
					width: 100%;
					font-size: 40px;
					line-height: 40px;
					color: #FFF;
					font-weight: bold;
					b {
						font-size: 16px;
						font-family: 'FZ';
						line-height: 40px;
						color: #fff;
					}
				}
				span {
					margin: 10px 0;
					display: inline-block;
					width: 120px;
					height: 40px;
					border-radius: 5px;
					background-color: #FFDD75;
					font-size: 16px;
					color: #A87F01;
					line-height: 40px;
					text-align: center;
					cursor: pointer;
					-webkit-box-shadow: 3px 3px 3px;  
					-moz-box-shadow: 3px 3px 3px;  
					box-shadow: 3px 3px 3px;
					&:hover {
						background-color: darken(#FFDD75, 10%)
					}
				}
			}
		}
	}
	.user-info-two {
		position: relative;
		margin-top: 25px;
		width: 275px*4 - 4px;
		height: 570px;
		border: 2px solid #8DE0FF;
		border-radius: 3px;
		.icon {
			position: absolute;
			top: -7px;
			left: -7px;
			width: 140px;
			height: 140px;
			background: url('../images/user/usercounticon.png') center no-repeat;
		}
		.title {
			height: 60px;
			font-size: 18px;
			font-family: 'FZ';
			line-height: 60px;
			color: #486B9E;
			padding-left: 80px;
			margin: 60px 130px;
			background: url('../images/user/userconticon2.png') left center no-repeat;
		}
		.row {
			padding: 0 40px;
			margin: 8px auto;
			width: 920px;
			height: 72px;
			border: 1px solid #ECECEC;
			.col {
				float: left;
				overflow: hidden;
				width: 25%;
				span {
					float: left;
					font-size: 14px;
					line-height: 72px;
				}
				p {
					padding: 0 10px;
					font-family: 'FZ';
					font-size: 22px;
					line-height: 72px;
					float: left;
					color: #006AA5;
					&.red {
						color: #FF6C00;
					}
				}
			}
		}
		.total {
			background-color: #ECECEC;
			.col {
				float: right;
				span {
					color: #006AA5;
				}
				p {
					color: #B80000;
				}
			}
		}
	}
	.user-info-three {
		position: relative;
		margin-top: 25px;
		margin-bottom: 30px;
		width: 275px*4 - 4px;
		height: 166px;
		border: 2px solid #B5E6DB;
		border-radius: 3px;
		.icon {
			position: absolute;
			top: -7px;
			left: -7px;
			width: 140px;
			height: 140px;
			background: url('../images/user/usernoticeicon.png') center no-repeat;
		}
		.content {
			height: 60px;
			font-size: 18px;
			font-family: 'FZ';
			line-height: 60px;
			color: #486B9E;
			padding-left: 80px;
			margin: 53px 130px;
			background: url('../images/user/usernoticeicon2.png') left center no-repeat;
			p, select, span {
				float: left;
			}
			select {
				font-size: 16px;
				margin: 10px;
				width: 115px;
				height: 40px;
				border-radius: 8px;
				border: 1px solid #8DE0FF;
				padding-left: 20px;
				&:focus {
					-webkit-box-shadow:0 0 5px #0CC;  
					-moz-box-shadow:0 0 5px #0CC;  
					box-shadow:0 0 5px #0CC; 
					border: 1px solid #8DE0FF;
					outline: 0;
				}
			}
			span {
				display: inline-block;
				margin: 10px 30px;
				width: 120px;
				height: 40px;
				font-size: 18px;
				color: #fff;
				line-height: 40px;
				text-align: center;
				background-color: #389AE6;
				border-radius: 5px;
				cursor: pointer;
				-webkit-box-shadow:0 2px 0 #2C84C8;  
				-moz-box-shadow:0 2px 0 #2C84C8;
				box-shadow:0 2px 0 #2C84C8; 
				&:hover {
					background-color: darken(#389AE6, 10%);
					 
				}
			}
		}
	}
}

//container end


//user-recharge.html
//container
.user-recharge-box {
	margin: auto;
	width: 275px*4;
	.user-recharge-one {
		position: relative;
		margin-top: 25px;
		margin-bottom: 30px;
		width: 275px*4 - 4px;
		height: 685px;
		border: 2px solid #8DE0FF;
		border-radius: 3px;
		.icon {
			position: absolute;
			top: -7px;
			left: -7px;
			width: 140px;
			height: 140px;
			background: url('../images/user/userchargeicon.png') center no-repeat;
		}
		.title {
			height: 60px;
			font-size: 18px;
			font-family: 'FZ';
			line-height: 60px;
			color: #486B9E;
			padding-left: 80px;
			margin: 60px 130px;
			background: url('../images/user/userchargeicon2.png') left center no-repeat;
			span {
				padding: 0 20px;
			}
			em {
				font-family: "Microsoft YaHei", serif;
				font-size: 35px;
				color: #FF7E00;
				font-weight: bold;
			}
			a {
				margin-right: 240px;
				font-size: 18px;
				font-family: 'FZ';
				line-height: 76px;
				color: #4B9FE7;
			}
		}
		.line {
			height: 2px;
			background-color: #F3F3F3;
			width: 600px;
			margin-left: 130px;
		}
		.charge-box {
			margin: 50px 130px;
			.charge-amount {
				display: inline-block;
				margin-bottom: 20px;
				height: 46px;
				font-size: 16px;
				line-height: 44px;
				.amount {
					margin: 0 10px;
					width: 150px;
					height: 44px;
					border-radius: 8px;
					border: 1px solid #8DE0FF;
					padding-left: 20px;
					font-size: 16px;
					&:focus {
						-webkit-box-shadow:0 0 5px #0CC;  
						-moz-box-shadow:0 0 5px #0CC;  
						box-shadow:0 0 5px #0CC; 
						border: 1px solid #8DE0FF;
						outline: 0;
					}
				}
			}
			.charge-way {
				overflow: hidden;
				p {
					margin-bottom: 20px;
					font-size: 16px;
					line-height: 44px;
				}
				.play {
					display: inline-block;
					width: 178px;
					height: 58px;
					border: 1px solid #DCDCDC;
					border-radius: 5px;
					text-align: center;
					cursor: pointer;
					b {
						display: inline-block;
						padding-left: 50px;
						width: 128px;
						height: 100%;
						font-weight: normal;
						font-size: 16px;
						line-height: 58px;
					}
					&:hover, &.active {
						border-color: #F74342;
						background: url('../images/user/userchargeicon3.png') 162px 40px no-repeat;
					}
				}
				.weixinplay {
					b {
						background: url('../images/user/weixinicon.png') 35px center no-repeat;
					}
				}
				.aplay {
					margin-left: 25px;
					b {
						background: url('../images/user/aplayicon.png') 35px center no-repeat;
					}
				}
				.btn-play {
					display: inline-block;
					margin: 4px 40px; 
					width: 150px;
					height: 50px;
					background-color: #FFAB5C;
					text-align: center;
					font-size: 16px;
					line-height: 50px;
					color: #fff;
					font-weight: bold;
					border-radius: 6px;
					-webkit-box-shadow:3px 3px 3px #D69304;  
					-moz-box-shadow:3px 3px 3px #D69304;  
					box-shadow:3px 3px 3px #D69304;
					cursor: pointer;
					&:hover {
						background-color: darken(#FFAB5C, 10%)
					}
				}
			}
		}
		.prompt {
			margin: 30px 130px;
			h3 {
				font-size: 16px;
				font-weight: normal;
				margin-bottom: 20px;
			}
			p {
				font-size: 14px;
				font-weight: normal;
				line-height: 26px;
				span {
					float: left;
					margin: 8px 10px;
					display: inline-block;
					width: 10px;
					height: 10px;
					border-radius: 5px;
					background-color: #FFDEAD;
				}
			}
		}
	}
}
//container end

//user-bill.html
//container
.user-bill-box {
	margin: auto;
	width: 275px*4;
	.user-bill-one {
		position: relative;
		margin-top: 25px;
		margin-bottom: 30px;
		width: 275px*4 - 4px;
		height: 1110px;
		border: 2px solid #8DE0FF;
		border-radius: 3px;
		.icon {
			position: absolute;
			top: -7px;
			left: -7px;
			width: 140px;
			height: 140px;
			background: url('../images/user/userbillicon.png') center no-repeat;
		}
		.title {
			height: 60px;
			font-size: 24px;
			line-height: 60px;
			color: #486B9E;
			margin: 60px 130px 30px;
		}
		.search-time {
			width: 675px;
			margin: 20px 130px;
			line-height: 38px;
			font-size: 14px;
			color: #486B9E;
			.inline {
				display: inline-block;
				vertical-align: top;
				li {
					width: 140px;
					height: 38px;
					margin: 0 15px;
					border-radius: 5px;
					border-color: #DCDCDC;
					cursor: pointer;
					background: url('../images/user/timeicon.png') 140px center no-repeat;
					line-height: 38px;
					padding-left: 20px;
					&:hover, &:focus, &.active {
						border-color: #8DE0FF;
						-webkit-box-shadow:0 0 3px #8DE0FF;
						-moz-box-shadow:0 0 3px #8DE0FF;
						box-shadow:0 0 3px #8DE0FF;
					}
				}
			}
			.search-btn {
				float: right;
				margin-left: 20px;
				display: inline-block;
				width: 62px;
				height: 40px;
				border-radius: 5px;
				background: url('../images/user/searchicon.png') center no-repeat #389AE6;
				cursor: pointer;
				&:hover {
					background-color: darken(#389AE6, 10%)
				}
			}
		}
		.line {
			height: 2px;
			background-color: #F3F3F3;
			width: 675px;
			margin-left: 130px;
		}
		.shows {
			height: 60px;
			font-size: 18px;
			font-family: 'FZ';
			line-height: 60px;
			color: #486B9E;
			padding-left: 80px;
			margin: 30px 130px;
			background: url('../images/user/userconticon2.png') left center no-repeat;
		}
		.records {
			margin: 0 46px;
			border: 1px solid #E7E7E7;
			font-size: 14px;
			line-height: 60px;
			.record-title {
				overflow: hidden;
				background-color: #E7E7E7;
				color: #658394;
			}
			.record-list {
				overflow: hidden;
				font-size: 12px;
				color: #8F8F8F;
				&:nth-child(2n) {
					background-color: #FCFCFC;
				}
			}
			p {
				float: left;
				height: 60px;
			}
			.order-no, .order-info {
				padding: 0 15px;
				text-align: left;
				display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
			}
			.order-info {
				cursor: default;
			}
			.order-status, .order-ctime, .order-playway, .order-amount {
				text-align: center;
				display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
			}
			.w240 {
				width: 240px;
			}
			.w280 {
				width: 280px;
			}
			.w160 {
				width: 160px;
			}
			.w100 {
				width: 100px;
			}
			.w80 {
				width: 80px;
			}
			.w120 {
				width: 120px;
			}
		}
	}
}
//container end

//product-info.html
//container
.container-product-nav {
	height: 90px;
	margin-top: -90px;
	background-color: #3180E1;
	.c-u-nav-options {
		margin: auto;
		width: 275px*4;
		height: 90px;
		a {
			font-size: 24px;
			line-height: 90px;
			text-align: center;
			color: #78C4FF;
			text-decoration: none;
		}
	}
	.c-u-nav-option {
		float: left;
		position: relative;
		width: 275px;
		height: 90px;
		background: no-repeat 50px center;
		font-size: 24px;
		line-height: 90px;
		text-align: center;
		color: #78C4FF;
		cursor: pointer;
		span {
			position: absolute;
			display: inline-block;
			bottom: -15px;
			left: (275px-28px)/2;
			width: 0;
			height: 0;
			border-left: 14px solid transparent;
			border-right: 14px solid transparent;
			border-top: 15px solid transparent;
		}
		
		&:hover {
			background-color: #3489f1;
			color: #fff;
			span {
				border-top: 15px solid transparent;
			}
		}
		&.active {
			background-color: #4FBCFB;
			color: #fff;
			span {
				border-top: 15px solid #4FBCFB;
			}
			&:hover {
				background-color: #4FBCFB;
				color: #fff;
				span {
					border-top: 15px solid #4FBCFB;
				}
			}
		}
	}
}

.productOptionImg(@num: 1, @min: 2) {
	@name : e(%(".option%d", @num));
	@url : %("../images/product/product%d.png", @num);
	@{name} {
		.img {
			background-image: url(@url);
		}
		.phover(@num) when (@num > @min) {
			@urlf : %("../images/product/productf%d.png", @num);
			&:hover {
				border-color: #5281E4;
				.img {
					background-image: url(@urlf);
				}
				.title {
					background-color: #5281E4;
				}
				.info {
					color: #84A3BF;
				}
			}
		}
		.phover(@num)
	}
}

.productImg(@num: 1) {
	@name : e(%(".img%d", @num));
	@url : %("../images/product/producticon%d.png", @num);
	@urlf : %("../images/product/producticonf%d.png", @num);
	@{name} {
		background-image: url(@url);
	}
	&:hover @{name} {
		background-image: url(@urlf);
	}
}

.product-content {
	overflow: hidden;
	.title {
		text-align: center;
		margin-top: 80px;
		h3 {
			font-size: 24px;
			color: #343434;
		}
		p {
			font-size: 16px;
			line-height: 30px;
			color: #A6A6A6;
		}
	}
	.option {
		float: left;
		margin: 20px 155px 20px 0;
		position: relative;
		padding: 5px;
		width: 330px;
		height: 460px;
		.img {
			height: 200px;
			width: 100%;
			background: center bottom no-repeat;
		}
		.title {
			text-align: center;
			margin: 30px 0;
			font-family: 'FZ';
			font-size: 24px;
			color: #373737;
			font-weight: normal;
		}
		.info {
			font-family: 'FZ';
			font-size: 14px;
			color: #ACACAC;
		}
		.btn {
			display: inline-block;
			margin-top: 460px - 36px - 60px;
			margin-left: (330px - 114px)/2;
			position: absolute;
			bottom: 20px;
			width: 114px;
			height: 36px;
			border: 1px solid #2696EC;
			text-align: center;
			line-height: 36px;
			font-size: 14px;
			color: #2696EC;
			border-radius: 5px;
			&:hover {
				background: #2696EC;
				color: #fff;
				cursor: pointer;
			}
			&.disable {
				background-color: #dcdcdc;
				border: #dcdcdc;
				color: #fff;
				&:hover {
					cursor: default;
				}
			}
		}
		&.last {
			margin-right: 0;
		}
	}
	.content-two {
		overflow: hidden;
		width: 1200px;
		margin: 40px auto;
		background-color: #F2F5FD;
		.option-map {
			width: 100%;
			height: 587px;
			text-align: center;
			img {
				margin: auto;
				width: 801px;
				height: 587px;
			}
		}
		.option {
			overflow: hidden;
			margin: 0;
			padding: 0;
			border: 0;
			width: 1200px/4;
			height: 310px;
			float: left;
			color: #006CC2;
			.img {
				height: 190px;
				width: 100%;
				background: center no-repeat;
			}
			.loop(@counter) when (@counter > 0) {
				.loop((@counter - 1));    // 递归调用自身
				.productImg(@counter);
			}
			.loop(12);
			.name {
				line-height: 20px;
				font-size: 18px;
				text-align: center;
			}
			.btn {
				display: inline-block;
				margin: 20px 92px;
				width: 116px;
				height: 34px;
				border: 2px solid #006CC2;
				color: #006CC2;
				font-size: 18px;
				text-align: center;
				line-height: 34px;
				&:hover {
					cursor: pointer;
					background-color: transparent;
					color: #006CC2;
				}
				&.disable {
					background-color: #dcdcdc;
					border: #dcdcdc;
					color: #fff;
					&:hover {
						cursor: default;
					}
				}
			}
			&:hover {
				background-color: #AFC2F6;
				color: #fff;
				.img1 {
					background-image: url('../images/product/producticonf1.png');
				}
				.img2 {
					background-image: url('../images/product/producticonf2.png');
				}
				.img3 {
					background-image: url('../images/product/producticonf3.png');
				}
				.img4 {
					background-image: url('../images/product/producticonf4.png');
				}
				.btn {
					border-color: #fff;
					color: #fff;
				}
			}
		}
	}
	.content-three {
		.option {
			padding: 0;
			border: 1px solid #7F96D3;
			float: left;
			width: 346px;
			height: 350px;
			cursor: pointer;
			margin: 20px 143px 20px 0;
			.title {
				margin: 0;
				width: 100%;
				height: 38px;
				background-color: #7F96D3;
				text-align: center;
				font-size: 18px;
				line-height: 38px;
				color: #fff;
			}
			.img {
				width: 100%;
				height: 200px;
			}
			.info {
				margin: 15px 35px;
				text-align: left;
				background-position: center;
			}
			&.last {
				margin-right: 0;
			}
		}
	}
	.loop(@counter) when (@counter > 0) {
		.loop((@counter - 1));    // 递归调用自身
		.productOptionImg(@counter, 3);
	}
	.loop(9);
	.loopl(@counter) when (@counter > 9) {
		.loopl((@counter - 1));    // 递归调用自身
		.productOptionImg(@counter, 12);
	}
	.loopl(13);
}
.product-two {
	background-color: #F9FBFE;
	.title {
		margin-top: 50px;	
	}
}
.product-map {
	background: url('../images/productmapbk.png') #F9FBFE;
}
//container end

//login.html
//login-box
.container-login {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.login-box {
	position: relative;
	// top: 216px;
	margin: auto;
	width: 352px;
	height: 430px;
	overflow: hidden;
	.img {
		position: relative;
		top: 0;
		margin: auto;
		width: 96px;
		height: 96px;
		background: url('../images/userloginheader.png') center no-repeat;
		background-size: 100%;
	}
	.login-by-account {
		margin-top: -48px;
		width: 350px;
		height: 380px;
		border-radius: 5px;
		border: 1px solid #CACACA;
		background-color: #fff;
		.title {
			font-size: 16px;
			text-align: center;
			line-height: 30px;
			margin: 75px 0 25px;
			color: #4DA1E7;
		}
		.input-box {
			overflow: hidden;
			padding: 0 35px;
			input {
				width: 228px;
				height: 38px;
				border: 1px solid #D2D2D2;
				border-radius: 5px;
				outline: none;
				font-size: 14px;
				line-height: 38px;
				&:focus {
					border-color: #8DE0FF;
					-webkit-box-shadow: 0 0 3px #8DE0FF;  
					-moz-box-shadow: 0 0 3px #8DE0FF;  
					box-shadow: 0 0 3px #8DE0FF;
				}
			}
			.name {
				margin-top: 3px;
				margin-bottom: 30px;
				background: url('../images/loginusernameiconf.png') 13px center no-repeat;
				padding-left: 50px;
				&:focus {
					background-image: url('../images/loginusernameicon.png');
				}
			}
			.pwd {
				margin-bottom: 3px;
				background: url('../images/loginuserpwdiconf.png') 13px center no-repeat;
				padding-left: 50px;
				&:focus {
					background-image: url('../images/loginuserpwdicon.png');
				}
			}
		}
		.forget {
			overflow: hidden;
			padding: 0 35px;
			a {
				float: right;
				font-size: 14px;
				line-height: 40px;
				text-decoration: none;
				&:hover {
					color: #8DE0FF;
				}
			}
			span {
				float: right;
				padding: 0 20px;
				display: inline-block;
				font-size: 14px;
				line-height: 38px;
			}
		}
		.btn-login {
			margin: 10px 35px;
			height: 40px;
			border-radius: 5px;
			background-color: #70D89C;
			font-size: 18px;
			line-height: 40px;
			text-align: center;
			color: #fff;
			cursor: pointer;
			-webkit-box-shadow: 0 2px 0 #5BB882;  
			-moz-box-shadow: 0 2px 0 #5BB882;  
			box-shadow: 0 2px 0 #5BB882;
			&:hover {
				background-color: darken(#70D89C, 10%)
			}
		}
	}
}

.by-weixin {
	display: none;
	height: 510px;
	width: 0;
	.title {
		font-size: 16px;
		text-align: center;
		line-height: 30px;
		margin: 60px 0 0;
		color: #4DA1E7;
	}
	.login-by-weixin {
		margin-top: -48px;
		width: 350px;
		height: 460px;
		border-radius: 5px;
		border: 1px solid #CACACA;
		background-color: #fff;
		.box {
			overflow: hidden;
			margin: 0 auto 0;
			width: 300px;
			height: 400px;
		}
		#login-container {
			margin-top: -40px;
		}
	}
}

.btn-by-way {
	position: absolute;
	top: 50%;
	left: 70%;
	width: 157px;
	height: 179px;
	background: url('../images/loginbtnbk.png') center no-repeat;
	.btn {
		float: left;
		width: 80px;
		height: 80px;
		background: center no-repeat;
		cursor: pointer;
	}
	.btn-by-account {
		background-image: url('../images/loginbtnicon1.png');
	}
	.btn-by-weixin {
		background-image: url('../images/loginbtnicon2.png');
	}
	.box {
		margin: 63px 34px;
		overflow: hidden;
		width: 80px;
		height: 80px;
		.box-1 {
			margin-left: -80px;
			width: 160px;
			height: 80px;
		}
	}
	.tip {
		position: relative;
		top: -58px;
		left: -2px;
		font-size: 14px;
		color: #2C62B3;
		text-align: center;
	}
}
.msg {
	display: none;
	position: absolute;
	width: 260px;
	height: 40px;
	margin: 0 35px;
	padding: 2px 10px;
	font-size: 12px;
	line-height: 20px;
	text-align: left;
	background-color: #FEF2F2;
	border: 1px solid #FFB4A8;
	overflow: hidden;
}
.weixinpay-qrcode-box {
	display: none;
	width: 306px;
	height: 368px;
	background-color: #fff;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 4px #5BB882;  
	-moz-box-shadow: 0 0 4px #5BB882;  
	box-shadow: 0 0 4px #5BB882;
	.title {
		padding-top: 20px;
		line-height: 40px;
		font-size: 14px;
		color: #343434;
		text-align: center;
	}
	#weixinpay-qrcode {
		margin: 20px auto 0;
		width: 256px;
		height: 256px;
		background-color: #000;
	}
}
//login-box end

//login-footer
.login-footer, .register-footer {
	position: absolute;
	top: 100%;
	text-align: center;
	margin: auto;
	width: 100%;
	height: 90px;
	background: url('../images/loginfootertopline.png') top center no-repeat #4DA1E7;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	line-height: 60px;
}
//login-footer end
//login.html end

//register.html
//.container-login
.container-register {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.register-box {
	position: relative;
	margin: auto;
	overflow: hidden;
	width: 280px*3;
	height: 600px;
	.title {
		font-size: 26px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
		color: #fff;
	}
	.img {
		margin: auto;
		width: 306px;
		height: 242px;
		background: url('../images/notregister.png') center no-repeat;
	}
	.not-register-one {
		margin-top: 70px;
		font-size: 24px;
		color: #fff;
		text-align: center;
		line-height: 40px;
	}
	.not-register-two {
		font-size: 18px;
		color: #fff;
		text-align: center;
		line-height: 40px;
	}
}
.register-process {
	position: relative;
	height: 100px;
	width: 100%;
	overflow: hidden;
	.one, .two, .three {
		position: relative;
		float: left;
		width: 280px;
		height: 100%;
		span {
			display: inline-block;
			height: 20px;
			width: 100%;
			line-height: 20px;
			font-size: 16px;
			color: #fff;
			text-align: center;
		}
		.img {
			margin: auto;
			width: 62px;
			height: 62px;
			background: url('../images/registericon1.png') center no-repeat;
			text-align: center;
			area {
				position: absolute;
				top: 10px;
				left: 119px;
				display: inline-block;
				width: 0;
				height: 42px;
				background-color: #fff;
				border-radius: 50%;
				&.active {
					width: 42px;
				}
			}
			span {
				position: relative;
				z-index: 2;
				color: #fff;
				font-size: 24px;
				line-height: 62px;
				&.active {
					color: #4DA1E7;
				}
			}
		}
	}
	.line {
		position: absolute;
		width: 200px;
		height: 3px;
		background-color: #9BC8F0;
		span {
			display: inline-block;
			float: left;
			height: 3px;
			width: 0;
			background-color: #fff;
		}
	}
	.line-1 {
		left: 178px;
		top: 30px;
	}
	.line-2 {
		left: 460px;
		top: 30px;
	}
}
.register-step {
	overflow: hidden;
	margin: auto;
	width: 450px;
	height: 420px;
	.register-step-box {
		overflow: hidden;
		margin-left: 0;
		width: 450px * 3;
		height: 420px;
		.step {
			float: left;
			overflow: hidden;
			width: 450px;
			height: 420px;
			label {
				display: inline-block;
				overflow: hidden;
				margin: 16px 50px;
				width: 350px;
				&.first {
					margin-top: 60px;
				}
			}
			input {
				padding: 0 10px;
				width: 330px;
				height: 38px;
				border: 1px solid #B0B0B0;
				border-radius: 5px;
				font-size: 14px;
			}
			button {
				margin: 20px 50px;
				border: 0;
				width: 350px;
				height: 40px;
				border-radius: 5px;
				background-color: #70D89C;
				font-size: 18px;
				color: #fff;
				&.disable {
					background-color: #ccc;
				}
			}
			.get-code-btn {
				float: right;
				display: inline-block;
				width: 150px;
				height: 40px;
				border-radius: 5px;
				cursor: pointer;
				text-align: center;
				font-size: 14px;
				line-height: 40px;
				background-color: #F6C749;
				color: #fff;
				&.disable {
					background-color: #dcdcdc;
				}
			}
			.telcode, .codeimgvalue {
				float: left;
				width: 160px;
			}
			.codeimg {
				float: left;
				margin-left: 18px;
				width: 150px;
				height: 40px;
				background-color: #fff;
				cursor: pointer;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.pwdqu {
				display: inline-block;
				width: 350px;
				height: 20px;
				margin-top: 20px;
				font-size: 14px;
				line-height: 20px;
				color: #fff;
				em {
					margin: 1px 2px;
					display: inline-block;
					width: 88px;
					height: 18px;
					border-radius: 9px;
					background-color: #AEC597;
					text-align: center;
					line-height: 18px;
					&.active {
						background-color: #E1C52C;
					}
				}
			}
			.title {
				margin-top: 60px;
				height: 60px;
				font-size: 24px;
				color: #FEE300;
				padding-left: 50px;
				line-height: 60px;
				background: url('../images/registericon2.png') 3px 0 no-repeat;
			}
			.gift {
				margin: auto;
				width: 224px;
				height: 275px;
				background: url('../images/registericon3.png') center no-repeat;
				a {
					position: relative;
					top: 225px;
					left: (224px - 80px)/2;
					margin: auto;
					display: inline-block;
					text-align: center;
					width: 80px;
					font-size: 20px;
					font-weight: bold;
					color: #fff;
					border-bottom: 1px dotted #fff;
					&:hover {
						color: #4DA1E7;
						text-decoration: none;
					}
				}
			}
		}
	}
}

//.container-login end
//register.html end


//user_change_pwd.html
//.user-changepwd-box
.user-changepwd-box {
	margin: auto;
	width: 275px*4;
	.changepwd {
		position: relative;
		margin-top: 25px;
		margin-bottom: 30px;
		width: 275px*4 - 4px;
		height: 685px;
		border: 2px solid #8DE0FF;
		border-radius: 3px;
		.icon {
			position: absolute;
			top: -7px;
			left: -7px;
			width: 140px;
			height: 140px;
			background: url('../images/user/userchangepwdicon.png') center no-repeat;
		}
		.title {
			height: 60px;
			font-size: 24px;
			font-family: 'FZ';
			line-height: 60px;
			font-weight: bold;
			color: #486B9E;
			padding-left: 80px;
			margin: 60px 178px 0;
			padding-bottom: 40px;
			background: url('../images/user/userchangepwdicon2.png') left 0 no-repeat;
			border-bottom: 1px solid #D3D3D3;
		}
		.box {
			margin: auto;
			overflow: hidden;
			padding: 80px 20px;
			width: 700px;
			label {
				width: 100%;
				display: inline-block;
				margin-bottom: 50px;
				font-size: 18px;
				color: #486B9E;
				line-height: 40px;
				.tishi {
					padding-left: 20px;
					font-size: 14px;
					color: #B1B1B1;
				}
				.pwdqu {
					display: inline-block;
					padding-left: 125px;
					height: 20px;
					margin-top: 20px;
					font-size: 14px;
					line-height: 20px;
					color: #4B4B4B;
					em {
						color: #fff;
						margin: 1px 2px;
						display: inline-block;
						width: 67px;
						height: 18px;
						border-radius: 9px;
						background-color: #FEF0A2;
						text-align: center;
						line-height: 18px;
						&.active {
							background-color: #E1C52C;
						}
					}
				}
			}
			input {
				width: 260px;
				height: 38px;
				border: 1px solid #E5E5E5;
				border-radius: 5px;
				padding-left: 20px;
				font-size: 16px;
				&:focus {
					-webkit-box-shadow:0 0 5px #9FD5FF;  
					-moz-box-shadow:0 0 5px #9FD5FF;  
					box-shadow:0 0 5px #9FD5FF; 
					border: 1px solid #9FD5FF;
					outline: 0;
				}
			}
			button {
				margin: 20px 160px;
				border: 0;
				width: 350px;
				height: 40px;
				border-radius: 5px;
				background-color: #3DA2E3;
				font-size: 18px;
				color: #fff;
			}
		}
	}
}

//.user-changepwd-box end
//user_change_pwd.html end

//about.html
//.about-container
//.about-container {
//	overflow: hidden;
//	width: 1190px;
//	margin: auto;
//	.left {
//		float: left;
//		margin-top: 30px;
//		overflow: hidden;
//		width: 900px;
//		.about {
//			margin-bottom: 20px;
//			width: 898px;
//			height: 320px;
//			border: 1px solid #EDEDED;
//			border-radius: 5px;
//			background: url('../images/about1.png') 40px center no-repeat #fff;
//			.title {
//				font-size: 24px;
//				font-weight: bold;
//				color: #394A58;
//				margin: 45px 0 0 225px;
//			}
//			.en {
//				font-size: 20px;
//				font-weight: bold;
//				color: #C1C1C2;
//				margin: 0 0 0 225px;
//			}
//			.info {
//				font-size: 14px;
//				color: #565656;
//				line-height: 22px;
//				width: 650px;
//				margin: 5px 0 0 225px;
//				p{
//					text-indent: 2em;
//				}
//			}
//		}
//		.recruit {
//			overflow: hidden;
//			margin-bottom: 20px;
//			width: 898px;
//			border: 1px solid #EDEDED;
//			border-radius: 5px;
//			background-color: #fff;
//			.top {
//				overflow: hidden;
//				width: 100%;
//				height: 201px;
//				background: url('../images/about2.png') 40px 40px no-repeat #fff;
//				.title {
//					font-size: 24px;
//					font-weight: bold;
//					color: #394A58;
//					margin: 45px 0 0 225px;
//				}
//				.en {
//					font-size: 20px;
//					font-weight: bold;
//					color: #C1C1C2;
//					margin: 0 0 0 225px;
//				}
//				.info {
//					font-size: 14px;
//					color: #565656;
//					line-height: 22px;
//					width: 650px;
//					margin: 0 0 0 225px;
//					padding: 20px 0;
//					border-bottom: 1px solid #EDEDED;
//				}
//			}
//			.recruit-info {
//				padding-left: 220px;
//				font-size: 14px;
//				line-height: 30px;
//				margin: 30px 0 0;
//			}
//			.recruit-option {
//				overflow: hidden;
//				width: 100%;
//				background: url('../images/about2.png') 40px 40px no-repeat #fff;
//				.title {
//					font-size: 18px;
//					color: #73C2FF;
//					margin: 40px 0 0 225px;
//					line-height: 60px;
//				}
//				.info {
//					font-size: 14px;
//					color: #565656;
//					line-height: 22px;
//					width: 650px;
//					margin: 0 0 0 225px;
//					padding-bottom: 40px;
//					border-bottom: 1px solid #EDEDED;
//					h3 {
//						line-height: 40px;
//					}
//				}
//			}
//			.option1 {
//				background-image: url('../images/about4.png');
//			}
//			.option2 {
//				background-image: url('../images/about3.png');
//			}
//			.bottom {
//				padding-left: 220px;
//				font-size: 18px;
//				line-height: 76px;
//				color: #73C2FF;
//				font-weight: bold;
//			}
//		}
//		.ourteam {
//			overflow: hidden;
//			margin-bottom: 20px;
//			width: 898px;
//			border: 1px solid #EDEDED;
//			border-radius: 5px;
//			background: url('../images/about5.png') 40px 40px no-repeat #fff;
//			.title {
//				font-size: 24px;
//				font-weight: bold;
//				color: #394A58;
//				margin: 45px 0 0 225px;
//			}
//			.en {
//				font-size: 20px;
//				font-weight: bold;
//				color: #C1C1C2;
//				margin: 0 0 0 225px;
//			}
//			.info {
//				font-size: 14px;
//				color: #565656;
//				line-height: 22px;
//				width: 650px;
//				margin: 0 0 0 225px;
//				padding: 20px 0;
//			}
//			.img {
//				margin: 40px;
//			}
//		}
//	}
//	.right {
//		margin-top: 30px;
//		float: right;
//		width: 270px;
//		height: 190px;
//		border: 1px solid #EDEDED;
//		border-radius: 5px;
//		background-color: #fff;
//		.title, .content {
//			float: left;
//			width: 80px;
//			margin: 16px 0;
//			text-align: right;
//			font-size: 14px;
//			color: #565656;
//			line-height: 26px;
//			.addr {
//				height: 52px;
//			}
//		}
//		.content {
//			width: 185px;
//			text-align: left;
//		}
//	}
//}

.about-founders {
	overflow: hidden;
	width: 1046px;
	margin: 0 auto 60px;
	.title {
		overflow: hidden;
		margin: 40px 0;
		h3 {
			text-align: center;
			font-size: 24px;
			color: #394A58;
			line-height: 30px;
		}
		p {
			font-size: 20px;
			text-align: center;
			color: #C1C1C2;
			line-height: 26px;
		}
	}
	.founder-box {
		float: left;
		margin: 0 23px 30px;
		width: 475px;
		height: 680px;
		border: 1px solid #EEEEEE;
		.founder-info {
			overflow: hidden;
			margin-top: 30px;
			text-align: center;
			h3 {
				font-size: 26px;
				color: #30A9E8;
				line-height: 36px;
			}
			h4 {
				font-size: 18px;
				font-weight: normal;
				color: #30A9E8;
				line-height: 24px;
			}
			p {
				padding: 15px 50px;
				line-height: 27px;
				text-align: left;
				color: #505050;
			}
		}
	}
}

.about-team {
	overflow: hidden;
	background-color: #EFF3F5;
	.title {
		overflow: hidden;
		margin: 60px 0 40px;
		h3 {
			text-align: center;
			font-size: 24px;
			color: #394A58;
			line-height: 30px;
		}
		p {
			font-size: 20px;
			text-align: center;
			color: #C1C1C2;
			line-height: 26px;
		}
		.info {
			margin: 30px auto 0;
			width: 650px;
			font-size: 14px;
			font-weight: normal;
			color: #000;
			text-align: left;
			line-height: 20px;
		}
	}
	.team-box {
		overflow: hidden;
		margin-bottom: 90px;
		.left {
			float: left;
			width: 342px;
			height: 635px;
			background-color: #3498DB;
			h3 {
				padding: 25px 20px 15px;
				font-size: 18px;
				font-weight: normal;
				color: #fff;
			}
			p {
				padding: 0 20px 25px;
				font-size: 14px;
				font-weight: normal;
				color: #ADDDF9;
			}
			.info {
				margin: 2px auto 0;
				width: 334px;
				height: 495px;
				background-color: #fff;
				h4 {
					padding: 30px 13px 10px;
					font-size: 14px;
					font-weight: normal;
					color: #7C7C7C;
				}
				p {
					padding: 0 14px;
					color: #7C7C7C;
					line-height: 36px;
					text-indent: 2.4em;
				}
				em {
					position: relative;
					display: inline-block;
					width: 238px;
					padding: 0 48px;
					font-size: 14px;
					font-weight: normal;
					color: #7C7C7C;
					line-height: 36px;
					text-indent: 2.4em;
					span {
						position: absolute;
						top: 14px;
						left: 48px;
						display: inline-block;
						width: 7px;
						height: 7px;
						border-radius: 3px;
						background-color: #3498DB;
					}
				}
			}
		}
		.right {
			float: left;
			width: 1190px - 342px;
			.teamOptionImg(@num) {
				@name: e(%(".option%d", @num));
				@url: %("../images/about/about-team%d.jpg", @num);
				@{name} {
					background-image: url(@url);
				}
			}
			.option {
				float: left;
				width: (1190px - 342px) / 3;
				height: 635px / 3;
				background-color: #fff;
				h3 {
					padding: 40px 20px 20px;
					font-size: 16px;
					color: #2C3E50;
				}
				p {
					padding: 0 20px;
					font-size: 14px;
					color: #7C7C7C;
					line-height: 20px;
				}
				.right-h3 {
					position: relative;
					margin: 40px 20px 20px;
					padding: 0 20px;
					font-size: 16px;
					font-weight: bold;
					color: #fff;
					line-height: 26px;
					background-color: #54BF90;
					width: 112px;
					&.o {
						background-color: #B167D0;
					}
					.a-left {
						position: absolute;
						top: 0;
						left: 0;
						display: inline-block;
						width: 0;
						height: 0;
						border-top: 13px solid #36A675;
						border-right: 10px solid #54BF90;
						border-bottom: 13px solid #36A675;
						&.al1 {
							border-color: #8E44AD;
							border-right-color: #B167D0;
						}
					}
					.a-right {
						position: absolute;
						top: 0;
						right: 0;
						display: inline-block;
						width: 0;
						height: 0;
						border-top: 13px solid #36A675;
						border-left: 10px solid #54BF90;
						border-bottom: 13px solid #36A675;
						&.al1 {
							border-color: #8E44AD;
							border-left-color: #B167D0;
						}
					}
				}
				.right-p {
					padding: 0 30px;
					color: #fff;
				}
			}
			.loop(@num) when(@num > 0) {
				.loop(@num - 1);
				.teamOptionImg(@num);
			}
			.loop(6)
		}
	}
}

.about-join {
	overflow: hidden;
	.title {
		overflow: hidden;
		margin: 60px 0 40px;
		h3 {
			text-align: center;
			font-size: 24px;
			color: #394A58;
			line-height: 30px;
		}
		p {
			font-size: 20px;
			text-align: center;
			color: #C1C1C2;
			line-height: 26px;
		}
		.info {
			margin: 30px auto 0;
			width: 650px;
			font-size: 14px;
			font-weight: normal;
			color: #000;
			text-align: left;
			line-height: 20px;
		}
	}
	.join-box {
		width: 1076px;
		height: 260px;
		margin: 0 auto 35px;
		.option {
			float: left;
			width: 100% / 3;
			height: 100%;
		}
		.option1 {
			background: url("../images/about/join1.png") center 40px no-repeat #F6F7F9;
			h3 {
				margin-top: 215px;
				font-size: 18px;
				color: #000;
				text-align: center;
			}
		}
		.option2 {
			background-color: #FCFAFB;
			h3 {
				padding: 40px 40px 20px;
				font-size: 18px;
				color: #4B4B4B;
			}
			p {
				padding: 0 40px;
				font-size: 14px;
				color: #4B4B4B;
				line-height: 26px;
			}
		}
		.option3 {
			background-color: #F3F3F3;
			h3 {
				padding: 40px 20px 10px;
				font-size: 18px;
				color: #4B4B4B;
			}
			p {
				padding: 0 20px;
				font-size: 14px;
				color: #4B4B4B;
				line-height: 20px;
			}
		}
	}
}

//.about-container end
//about.html end


//product_application.html
//.product-app-content

.appTitleOptionWho(@num: 1) {
	@name : e(%(".option%d", @num));
	@url : %("../images/product/appicon%d.png", @num);
	@urlf : %("../images/product/appiconf%d.png", @num);
	@{name} {
		.img {
			background-image: url(@url);
		}
		&:hover, &.active {
			.img {
				background-image: url(@urlf);
			}
		}
	}
}

.appOptionsWho(@num: 1) {
	@name : e(%(".option%d", @num));
	@url : %("../images/product/app%d.png", @num);
	@{name} {
		.img {
			background-image: url(@url);
		}
	}
}

.product-app-content {
	overflow: hidden;
	width: 1196px;
	margin: auto;
	.app-nav {
		float: left;
		overflow: hidden;
		width: 270px;
		height: 465px;
		margin: 30px 0;
		border: 1px solid #D3D3D3;
		background-color: #fff;
		.title {
			height: 60px;
			background-color: #226DC2;
			font-size: 16px;
			color: #fff;
			text-align: center;
			line-height: 60px;
		}
		.option {
			margin: auto;
			width: 210px;
			height: 80px;
			font-size: 14px;
			line-height: 80px;
			border-bottom: 1px solid #F3F3F3;
			color: #297DDF;
			cursor: pointer;
			.img {
				float: left;
				width: 100px;
				height: 80px;
				background: center no-repeat;
			}
			&:hover, &.active {
				color: #AD9CE6;
			}
		}
		.loop(@counter) when (@counter > 0) {
			.loop((@counter - 1));    // 递归调用自身
			.appTitleOptionWho(@counter);
		}
		.loop(5)
	}
	.app-options {
		float: right;
		overflow: hidden;
		margin: 30px 0;
		width: 906px;
		border: 1px solid #D3D3D3;
		background-color: #fff;
		.app-option {
			float: left;
			margin: 35px 48px;
			width: 810px;
			height: 150px;
			position: relative;
			.img {
				float: left;
				width: 116px;
				height: 106px;
				margin-right: 32px;
				margin-top: 12px;
			}
			.title {
				font-size: 18px;
				color: #297DDF;
				font-weight: normal;
				margin-bottom: 15px;
				margin-top: 12px;
			}
			p {
				font-size: 14px;
				line-height: 20px;
				color: #525252;
			}
			button {
				position: absolute;
				right: 0;
				top: 0;
				width: 128px;
				height: 38px;
				border-radius: 5px;
				border: 1px solid #297DDF;
				background-color: #fff;
				&:hover {
					background-color: #297DDF;
					color: #fff;
				}
			}
		}
		.loop(@counter) when (@counter > 0) {
			.loop((@counter - 1));    // 递归调用自身
			.appOptionsWho(@counter);
		}
		.loop(27)
	}
}
//.product-app-content end
//product_application.html end

//ghostcloud_school.html
//school-container
.school-container {
	overflow: hidden;
	width: 1190px;
	margin: 20px auto 30px;
	.banner {
		margin-bottom: 15px;
	}
	.tap-nav {
		overflow: hidden;
		float: left;
		width: 1188px;
		background-color: #fff;
		border: 1px solid #F4F4F4;
		.nav {
			overflow: hidden;
			border-bottom: 1px solid #F4F4F4;
			background-color: #FBFBFB;
			h3 {
				float: left;
				width: 150px;
				height: 46px;
				border-right: 1px solid #F4F4F4;
				border-top: 4px solid transparent;
				background-color: #FBFBFB;
				font-size: 14px;
				line-height: 46px;
				font-weight: normal;
				cursor: pointer;
				text-align: center;
				&:hover, &.active {
					border-top-color: #FFB900;
					font-weight: 600;
					background-color: #FFF;
				}
			}
		}
		.content {
			.info-left {
				float: left;
				padding: 23px 0 23px 40px;
				width: 856px;
				p {
					float: left;
					display: inline-block;
					width: 100%;
					padding-left: 40px;
					line-height: 30px;
					font-size: 14px;
					color: #8B8B8B;
					background: data-uri('../images/icon1.png') left center no-repeat;
				}
				b {
					display: inline-block;
					padding: 20px 0 5px;
					line-height: 30px;
					font-size: 14px;
					span {
						margin: 0 10px;
						display: inline-block;
						line-height: 26px;
						font-weight: normal;
						color: #8B8B8B;
					}
					.option:hover, .option.active {
						color: #FF0000;
						border-bottom: 2px solid #FF0000;
						cursor: pointer;
					}
				}
			}
			.info-right {
				float: right;
				padding: 42px 0;
				width: 268px;
				h2 {
					font-family: Arial, serif;
					font-size: 30px;
					font-weight: bold;
					color: #AEC6D0;
				}
				p {
					font-family: Arial, serif;
					font-size: 43px;
					font-weight: bold;
					color: #FFC900;
					span {
						font-family: "Microsoft YaHei UI", serif;
						font-size: 16px;
						font-weight: normal;
						color: #AEC6D0;
					}
				}
			}
		}
	}
	.left {
		overflow: hidden;
		float: left;
		width: 855px;
		border: 1px solid #F4F4F4;
		background-color: #fff;
		margin-top: 15px;
		padding: 0 20px;
		.option {
			overflow: hidden;
			margin-top: 50px;
			width: 100%;
			height: 200px;
			border-bottom: 1px solid #DBEDFB;
			.img {
				float: left;
				width: 236px;
				height: 152px;
				border: 1px solid #DEE7EE;
				border-radius: 2px;
				img {
					margin: 6px;
					width: 236px - 12px;
					height: 152px - 12px;
					border: 0;
				}
			}
			.info {
				overflow: hidden;
				float: right;
				width: 580px;
				height: 152px;
				position: relative;
				.title {
					font-size: 22px;
					color: #394A58;
					font-weight: normal;
				}
				.tip {
					margin: 20px 0;
					width: 100%;
					height: 24px;
					line-height: 24px;
					font-size: 12px;
					color: #B6B6B6;
					p {
						float: left;
						margin-right: 35px;
					}
					.time {
						padding-left: 30px;
						background: url('../images/timeicon.png') left center no-repeat;
					}
					.label {
						span {
							overflow: hidden;
							display: inline;
							padding: 6px;
							height: 24px;
							border-radius: 3px;
							background-color: #C5E2EC;
							color: #fff;
							margin: 0 5px;
							&.color1 {
								background-color: #C5E2EC;
							}
							&.color2 {
								background-color: #E0C4D8;
							}
							&.color3 {
								background-color: #D4C96B;
							}
							&.color4 {
								background-color: #75D46B;
							}
							&.color3 {
								background-color: #C3EABD;
							}
						}
					}
				}
				.brief {
					font-size: 14px;
					line-height: 20px;
					color: #394A58;
					.bj {
						width: 100%;
						height: 20px;
						color: #000;
					}
					.content {
						float: left;
						height: 40px;
						.after {
							display: inline-block;
						    position:absolute;
						    color: #394A58;
						    bottom:0;
						    right:0;
						    background-color: #fff;
						    padding: 0 20px 1px 4px;
						}
					}
				}
				.operation {
					position: absolute;
					top: 0;
					right: 0;
					line-height: 26px;
					padding: 0 10px;
					font-size: 14px;
					color: #2696EC;
					a {
						line-height: 26px;
						padding: 0 10px;
						font-size: 14px;
						color: #2696EC;
						float: right;
						&.red {
							color: #c28cb3;
						}
						&.gr {
							color: #9bd1e3;
						}
						&:hover {
							text-decoration: none;
							color: darken(#2696EC, 10%);
						}
					}
				}
			}
			&.noimg {
				.info {
					width: 100%;
					.brief {
						.content {
							height: 60px;
						}
					}
				}
			}
		}
	}
	.right {
		float: right;
		width: 280px;
		border: 1px solid #F4F4F4;
		background-color: #fff;
		margin-top: 15px;
		.search-box {
			overflow: hidden;
			margin-top: 50px;
			input {
				margin: 3px 0 3px 4px;
				float: left;
				padding: 0 15px;
				width: 190px;
				height: 32px;
				font-size: 14px;
				line-height: 32px;
				color: #343434;
				border: 1px solid #CCCCCC;
				border-right: 0;
				&:focus {
					-webkit-box-shadow:0 0 5px #9FD5FF;  
					-moz-box-shadow:0 0 5px #9FD5FF;  
					box-shadow:0 0 5px #9FD5FF; 
					border: 1px solid #9FD5FF;
					border-right: 0;
					outline: 0;
				}
			}
			.search-btn {
				margin-top: 3px;
				float: left;
				display: inline-block;
				width: 55px;
				height: 34px;
				cursor: pointer;
				background: url('../images/user/searchicon.png') center no-repeat #4EB2FF;
			}
		}
		.hot-label {
			overflow: hidden;
			margin-top: 30px;
			width: 100%;
			h3 {
				font-size: 16px;
				color: #394A58;
				padding-left: 15px;
				text-align: left;
				font-weight: normal;
				line-height: 38px;
				background-color: #EEF1F5;
			}
			.hot-content {
				padding: 10px;
				width: 310px;
				span {
					display: inline-block;
					font-size: 14px;
					line-height: 40px;
					padding-right: 35px;
					color: #2696EC;
				}
				.font1 {
					font-size: 14px;
				}
				.font2 {
					font-size: 18px;
				}
				.font3 {
					font-size: 24px;
				}
			}
		}
		.recent-posts {
			overflow: hidden;
			width: 100%;
			h3 {
				font-size: 16px;
				color: #394A58;
				padding-left: 15px;
				text-align: left;
				font-weight: normal;
				line-height: 38px;
				background-color: #EEF1F5;
			}
			.recent-content {
				overflow: hidden;
				margin: 15px 0;
				p {
					font-size: 14px;
					color: #575757;
					text-align: left;
					line-height: 40px;
					display: block;
					white-space: nowrap;
					overflow: hidden; 
					text-overflow: ellipsis;
					span {
						float: left;
						display: inline-block;
						width: 4px;
						height: 4px;
						background-color: #ABABAB;
						margin: 18px;
					}
				}
			}
		}
	}
}

//school-container end
//ghostcloud_school.html end


//change_password.html
//container_changepwd
.container_changepwd {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.changepwd-box {
	position: relative;
	margin: auto;
	overflow: hidden;
	width: 280px*3;
	height: 600px;
	.title {
		font-size: 26px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
		color: #fff;
	}
	.changepwd-content {
		overflow: hidden;
		margin: auto;
		width: 450px;
		height: 500px;
		label {
			display: inline-block;
			overflow: hidden;
			margin: 20px 50px;
			width: 350px;
			&.first {
				margin-top: 80px;
			}
		}
		input {
			padding: 0 10px;
			width: 330px;
			height: 38px;
			border: 1px solid #B0B0B0;
			border-radius: 5px;
			font-size: 14px;
		}
		button {
			margin: 20px 50px;
			border: 0;
			width: 350px;
			height: 40px;
			border-radius: 5px;
			background-color: #70D89C;
			font-size: 18px;
			color: #fff;
			&.disable {
				background-color: #ccc;
			}
		}
		.get-code-btn {
			float: right;
			display: inline-block;
			width: 150px;
			height: 40px;
			border-radius: 5px;
			cursor: pointer;
			text-align: center;
			font-size: 14px;
			line-height: 40px;
			background-color: #F6C749;
			color: #fff;
			&.disable {
				background-color: #dcdcdc;
			}
		}
		.telcode, .codeimgvalue {
			float: left;
			width: 160px;
		}
		.codeimg {
			float: left;
			margin-left: 18px;
			width: 150px;
			height: 40px;
			background-color: #fff;
			cursor: pointer;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.pwdqu {
			display: inline-block;
			width: 350px;
			height: 20px;
			margin-top: 20px;
			font-size: 14px;
			line-height: 20px;
			color: #fff;
			em {
				margin: 1px 2px;
				display: inline-block;
				width: 88px;
				height: 18px;
				border-radius: 9px;
				background-color: #AEC597;
				text-align: center;
				line-height: 18px;
				&.active {
					background-color: #E1C52C;
				}
			}
		}
		.title {
			margin-top: 60px;
			height: 60px;
			font-size: 24px;
			color: #FEE300;
			padding-left: 50px;
			line-height: 60px;
			background: url('../images/registericon2.png') 3px 0 no-repeat;
		}
		.gift {
			margin: auto;
			width: 224px;
			height: 275px;
			background: url('../images/registericon3.png') center no-repeat;
			a {
				position: relative;
				top: 225px;
				left: (224px - 80px)/2;
				margin: auto;
				display: inline-block;
				text-align: center;
				width: 80px;
				font-size: 20px;
				font-weight: bold;
				color: #fff;
				border-bottom: 1px dotted #fff;
				&:hover {
					color: #4DA1E7;
					text-decoration: none;
				}
			}
		}
	}
}

//container_changepwd end
//change_password.html end


//propaganda-box
.propaganda-box {
	position: relative;
	width: 1218px;
	height: 625px;
	.btn {
		position: absolute;
		top: 485px;
    	left: 800px;
		background-color: #302556;
		display: inline-block;
		width: 260px;
		height: 66px;
		border-radius: 33px;
		font-size: 36px;
		color: #FFE690;
		line-height: 66px;
		text-align: center;
		text-decoration: none;
		font-weight: normal;
		border: 1px solid #596EA8;
		-webkit-box-shadow: 0 0 10px;  
		-moz-box-shadow: 0 0 10px;  
		box-shadow: 0 0 10px;
		&:hover {
			background-color: lighten(#302556, 10%)
		}
	}
}
//propaganda-box end

//ghostcloud_charge.html
//container-charge
//.container-charge {
//	overflow: hidden;
//	.title {
//		margin: 60px 0;
//		text-align: center;
//		h3 {
//			font-weight: bold;
//			font-size: 24px;
//			color: #343434;
//			line-height: 60px;
//		}
//		p {
//			font-size: 16px;
//			color: #A6A6A6;
//		}
//	}
//	table {
//		overflow: hidden;
//		width: 100%;
//		border: 0;
//		.b0 {
//			border-right: 0 solid #FFFF88;
//		}
//		.bb1 {
//			border-bottom: 1px solid #E7E7E7;
//		}
//		.bkcolor1 {
//			background-color: #0DA6D7;
//		}
//		.bkcolor2 {
//			background-color: #F2F2F2;
//		}
//		.bkcolor3 {
//			background-color: #F5F5F5;
//		}
//		th {
//			overflow: hidden;
//			background-color: #12BBF2;
//			line-height: 50px;
//			text-align: center;
//			font-weight: normal;
//			font-size: 16px;
//			color: #fff;
//			border-right: 1px solid #EFEFEF;
//		}
//		td {
//			border-bottom: 1px solid #E7E7E7;
//			border-right: 1px solid #EFEFEF;
//			text-align: center;
//			font-size: 16px;
//			.info {
//				float: left;
//				overflow: hidden;
//			}
//			.top {
//				line-height: 50px;
//				font-weight: normal;
//			}
//			.bottom {
//				margin: 25px;
//				overflow: hidden;
//				line-height: 30px;
//				font-size: 14px;
//				color: #333333;
//				p span {
//					font-size: 28px;
//					color: #FFA200;
//				}
//				.old-color {
//					color: #949494;
//				}
//				.line {
//					display: inline-block;
//					width: 100%;
//					border-bottom: 1px dashed #B5B5B4;
//				}
//			}
//			.charge-info {
//				padding: 0 48px;
//				text-align: left;
//				font-size: 14px;
//				color: #333333;
//				line-height: 30px;
//			}
//			.f {
//				display: inline-block;
//				width: 27px;
//				height: 27px;
//				margin-top: 22px;
//			}
//			.x {
//				background: data-uri("../images/x.png") center no-repeat;
//			}
//			.v {
//				background: data-uri("../images/v.png") center no-repeat;
//			}
//		}
//	}
//	.table2 {
//		td {
//			line-height: 60px;
//		}
//	}
//	.problem {
//		overflow: hidden;
//		margin-bottom: 40px;
//		.option {
//			float: left;
//			margin-right: 1190px - 560px * 2;
//			margin-bottom: 65px;
//			width: 558px;
//			height: 206px;
//			border: 1px solid #EFEFEF;
//			.img {
//				float: left;
//				width: 210px;
//				height: 206px;
//			}
//			.info {
//				float: right;
//				width: 558px - 210px - 60px;
//				margin: 30px;
//				text-align: left;
//				h3 {
//					font-family: FZ, serif;
//					font-size: 16px;
//					color: #0063B0;
//				}
//				p {
//					margin-top: 15px;
//					font-size: 14px;
//					line-height: 22px;
//				}
//			}
//		}
//	}
//}

//new charge
.container-charge-title {
	overflow: hidden;
	font-size: 18px;
	line-height: 22px;
	color: #00A2CD;
	border-bottom: 1px solid #E5E5E5;
	.w1190 {
		overflow: hidden;
		margin: 18px auto;
		padding-left: 12px;
		border-left: 5px solid #00A2CA;
	}
}
.container-charge {
	margin-top: 15px;
	.charge-nav-box {
		position: relative;
		border-bottom: 1px solid #EEEEEE;
		height: 47px;
		.nav {
			float: left;
			width: 175px;
			height: 46px;
			border: 1px solid #EEEEEE;
			background-color: #FAFAFA;
			font-size: 14px;
			line-height: 46px;
			text-align: center;
			color: #595959;
			&:hover {
				color: #000;
				cursor: pointer;
				font-weight: bold;
			}
			&.active {
				color: #000;
				border-top: 4px solid #5CB1F2;
				height: 43px;
				line-height: 40px;
				cursor: pointer;
				background-color: #fff;
				border-bottom-color: #FFF;
				&:hover {
					font-weight: normal;
				}
			}
		}
	}
	.content {
		margin-top: 17px;
		margin-bottom: 108px;
		overflow: hidden;
		.option-box {
			float: left;
			width: 840px;
			overflow: hidden;
			.title {
				padding-left: 75px;
				height: 36px;
				background: 20px center no-repeat #F2F5F9;
				font-size: 14px;
				line-height: 36px;
			}
			.caas-introduce {
				margin-top: 10px;
				overflow: hidden;
				border: 1px solid #EEEEEE;
				padding: 18px 22px;
				text-align: left;
				background-color: #FAFAFA;
				h3 {
					font-size: 14px;
					color: #0E70BB;
				}
				p {
					margin-top: 12px;
					line-height: 22px;
					font-size: 12px;
					color: #4E4E4E;
				}
			}
			.title1 {
				background-image: data-uri('../images/charge/icon1.png');
			}
			.title2 {
				margin-top: 38px;
				background-image: data-uri('../images/charge/icon2.png');
			}
			.title3 {
				margin-top: 50px;
				background-image: data-uri('../images/charge/icon3.png');
			}
			.title4 {
				margin-top: 50px;
				background-image: data-uri('../images/charge/icon4.png');
			}
		}
		.config-option {
			overflow: hidden;
			background-color: #FAFAFA;
			margin-bottom: 12px;
			h3 {
				float: left;
				display: inline-block;
				padding: 50px 5px;
				width: 20px;
				background-color: #F1F1F1;
				font-size: 14px;
				color: #4E4E4E;
				text-align: center;
			}
			.config-box {
				overflow: hidden;
				width: 810px;
				height: 100%;
				.config-box-option {
					overflow: hidden;
					width: 100%;
					margin-top: 24px;
				}
				.area-introduce {
					float: left;
					width: 100%;
					margin: 19px 0;
					.box-title {
						height: 50px;
						line-height: 25px;
					}
					.introduce-info {
						line-height: 25px;
						color: #8B8B8B;
					}
				}
				.box-title {
					float: left;
					width: 150px;
					font-size: 14px;
					color: #383838;
					text-align: right;
					line-height: 40px;
					margin-right: 20px;
				}
				.box-option {
					float: left;
					margin-right: 2px;
					width: 128px;
					height: 40px;
					background-color: #EEEEEE;
					font-size: 14px;
					color: #383838;
					text-align: center;
					line-height: 40px;
					border: 1px solid transparent;
					cursor: pointer;
					&:hover, &.active {
						border-color: #2696EC;
						color: #00A2CA;
						background-color: #fff;
					}
				}
				.scale-panel{
					float: left;
					width: 410px;
					height: 40px;
					position: relative;
					span {
						position: absolute;
						bottom: -10px;
					}
					.r {
						right: 0;
					}
					.c44 {
						left: 44%;
					}
					.c {
						left: 50%;
					}
					.l {
						left: 0;
					}
				}
				.scale {
					background-color: #E4E4E4;
					width: 410px;
					height: 6px;
					position: relative;
					border-radius: 3px;
					top: 17px;
				}
				.scale span {
					width: 26px;
					height: 26px;
					border-radius: 13px;
					background-color: #fff;
					border-color: #8E8E8E;
					-webkit-box-shadow: 0 2px 2px;
					-moz-box-shadow: 0 2px 2px;
					box-shadow: 0 2px 2px;
					position: absolute;
					left: 1px;
					top: -12px;
					cursor: pointer;
					z-index: 999;
				}
				.scale .part {
					display: inline-block;
					width: 9px;
					height: 6px;
					background: url(../images/charge/icon10.png) -7px 3px no-repeat;
					position: absolute;
					left: 1px;
					top: 0;
					cursor: pointer;
					&.active {
						background: url(../images/charge/icon10.png) 4px 3px no-repeat;
					}
					&.m-partb, &.m-parte {
						background: none;
					}
					&.m-parte {
						left: 400px;
					}
				}
				.partpos(@num: 1) {
					@name : e(%(".m-part%d", @num));
					@pos : (@num/9) * 410px - 4px;
					@{name} {
						left: @pos;
					}
				}
				.loop(@counter) when (@counter > 0) {
					.loop((@counter - 1));    // 递归调用自身
					.partpos(@counter);
				}
				.scale {
					.loop(8);
				}

				.scale div {
					border-radius: 3px;
					background-color: #69BEFF;
					position: absolute;
					height: 6px;
					width: 0;
					left: 0;
					bottom: 0;
				}
				.scale-info {
					float: left;
					overflow: hidden;
					font-size: 14px;
					color: #3D3E3E;
					span {
						display: inline-block;
						margin: 5px 5px 5px 20px;
						width: 55px;
						height: 28px;
						text-align: center;
						line-height: 28px;
						border: 1px solid #BFBFBF;
						background-color: #fff;
					}
				}
				.load-balancing {
					span {
						float: left;
						line-height: 45px;
						font-size: 14px;
					}
					.mr20 {
						margin-right: 10px;
					}
					.ml20 {
						margin-left: 10px;
					}
					.load-balancing-box {
						float: left;
						height: 45px;
						width: 105px;
						background-color: #E4E4E4;
						border-radius: 22px;
						cursor: pointer;
						span {
							display: inline-block;
							background-color: #fff;
							width: 43px;
							height: 43px;
							border-radius: 50%;
							margin: 1px;
							cursor: pointer;
						}
					}
				}
				.memory-space {
					position: relative;
				}
				.area-option {
					width: 128px;
				}
				.disk-space-option, .kernel-option {
					width: 88px;
				}
			}
		}
		.option1 {
			height: 160px;
			h3 {
				line-height: 30px;
			}
		}
		.option2 {
			height: 222px;
			h3 {
				padding: 79px 5px;
				line-height: 16px;
			}
		}
		.option3 {
			height: 108px;
			h3 {
				padding: 22px 5px;
				line-height: 16px;
			}
		}
		.free-box {
			overflow: hidden;
			.free-option {
				margin-right: 10px;
				float: left;
				position: relative;
				width: 158px;
				height: 152px;
				border: 1px solid #E8E8E8;
				background: center 20px no-repeat #FAFAFA;
				h3 {
					width: 100%;
					position: absolute;
					bottom: 20px;
					text-align: center;
					font-size: 14px;
					color: #4E4E4E;
					font-weight: normal;
				}
			}
			.pass-free {
				width: 200px;
			}
			.mr0 {
				margin-right: 0;
			}
			.free-option1 {
				background-image: url(../images/charge/icon5.png);
			}
			.free-option2 {
				background-image: url(../images/charge/icon6.png);
			}
			.free-option3 {
				background-image: url(../images/charge/icon7.png);
			}
			.free-option4 {
				background-image: url(../images/charge/icon8.png);
			}
			.free-option5 {
				background-image: url(../images/charge/icon9.png);
			}
		}
	}
	.price-list {
		float: right;
		overflow: hidden;
		width: 338px;
		.list-title {
			padding: 0 14px;
			height: 36px;
			font-size: 14px;
			line-height: 36px;
			background-color: #FFE6C3;
		}
		.config-info {
			margin-top: 10px;
			padding: 18px 0;
			background-color: #F5F5F5;
			h3 {
				padding: 14px;
				font-size: 16px;
				font-weight: bold;
				color: #5D5D5D;
			}
			p {
				padding: 0 50px;
				font-weight: bold;
				line-height: 40px;
				span {
					float: left;
					display: inline-block;
					width: 70px;
					color: #848383;
				}
			}
			.num-box {
				overflow: hidden;
				padding: 0 50px;
				font-weight: bold;
				line-height: 40px;
				span {
					float: left;
					display: inline-block;
					width: 70px;
					color: #848383;
				}
				.num-info {
					position: relative;
					float: left;
					overflow: hidden;
					border: 1px solid #C9C9C9;
					width: 92px;
					height: 29px;
					margin-top: 5px;
					background-color: #fff;
					.num {
						float: left;
						padding: 0 5px;
						width: 60px;
						height: 29px;
						font-size: 14px;
						font-weight: normal;
						line-height: 29px;
						color: #000;
						border: 0;
						outline: none;
					}
					.add, .sub {
						position: absolute;
						right: 0;
						display: inline-block;
						width: 22px;
						height: 14px;
						background: url(../images/charge/icon10.png) no-repeat #F1F1F1;
						cursor: pointer;
					}
					.add {
						top: 0;
						background-position: 3px 0;
						&.disable {
							background-position: -26px 0;
						}
					}
					.sub {
						bottom: 0;
						background-position: 3px -15px;
						&.disable {
							background-position: -26px -15px;
						}
					}
				}
			}
		}
		.charge-result {
			margin-top: 20px;
			padding: 18px 0;
			background-color: #F5F5F5;
			h3 {
				margin: 0 14px;
				padding: 14px 0;
				font-size: 16px;
				font-weight: bold;
				color: #5D5D5D;
				border-bottom: 1px solid #DCDCDC;
			}
			p {
				margin: 0 14px;
				padding: 14px 0;
				font-size: 36px;
				font-weight: bold;
				color: #FF6600;
				text-align: right;
				em {
					font-family: Arial;
				}
				span {
					font-size: 14px;
					color: #393939;
					font-weight: normal;
				}
			}
		}
	}
}
